<template>
  <div
    v-for="section in emojiSections"
    :key="section.title"
    class="senctionBox"
  >
    <h1>{{ section.title }}</h1>
    <div class="table">
      <div
        class="tableItem"
        v-for="item in section.list"
        :key="item.name"
        @click="handleClick(item.name)"
      >
        <div class="emoji">{{ item.emoji }}</div>
        <div class="nameBox">
          <div class="name_cn">{{ item.name_cn }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import {
  faceEmojiList,
  animalEmojiList,
  foodEmojiList,
  markEmojiList,
  plantEmojiList,
  transportEmojiList,
  objectEmojiList,
  flagEmojiList,
} from "./EmojiList";
import { useCopy } from "@/hooks/useCopy";

const { copy } = useCopy();

const emojiSections = computed(() => [
  { title: "表情Emoji", list: faceEmojiList },
  { title: "动物Emoji", list: animalEmojiList },
  { title: "食物Emoji", list: foodEmojiList },
  { title: "标记Emoji", list: markEmojiList },
  { title: "植物Emoji", list: plantEmojiList },
  { title: "交通Emoji", list: transportEmojiList },
  { title: "物品Emoji", list: objectEmojiList },
  // { title: "旗帜Emoji", list: flagEmojiList },
]);
const handleClick = (name: string) => {
  copy(name);
};
</script>

<style scoped lang="scss">
.table {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  gap: 12px;
  justify-content: center;

  .tableItem {
    width: 100px;
    height: 100px;
    padding: 10px;
    border-radius: var(--radius);
    background-color: var(--gray_light);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    &:hover {
      background-color: var(--hover_light);
      .emoji {
        transform: scale(1.5);
      }
    }

    .emoji {
      width: 60px;
      height: 60px;
      border-radius: var(--radius);
      text-align: center;
      font-size: 36px;
      transition: transform 0.3s ease; /* 平滑过渡 */
    }

    .nameBox {
      font-size: 12px;
      width: 80%;
      margin-top: auto;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .name {
      }

      .name_cn {
      }
    }
  }
}
</style>
